import React, { Component } from 'react'
import { View, Text, StyleSheet, Button, TouchableNativeFeedback } from 'react-native'

const styles = StyleSheet.create({
  wrap: {
    padding: 18
  },
  header: {
    flexDirection: 'row',
    paddingBottom: 18
  },
  title: {
    flex: 1,
    fontSize: 16,
    color: '#333333',
    fontWeight: 'bold'
  },
  button: {
    fontSize: 12,
    color: '#565656',
    borderRadius: 12,
    padding: 6,
    borderColor: '#e6e6e6',
    borderWidth: 1
  },
  text: {
    color: '#565656'
  }
})

export default class Card extends Component {
  render() {
    let { title, btnTitle } = this.props
    return (
      <View style={styles.wrap}>
        <View style={styles.header}>
          <Text style={styles.title}>{title}</Text>
          <TouchableNativeFeedback onPress={() => {}}>
            <View style={styles.button}>
              <Text style={styles.text}>{btnTitle}</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
        {this.props.children}
      </View>
    )
  }
}